<template>
    <div class="points_box">
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
    </div>
</template>

<script>
export default {
   name: 'PointsLoadingA'

}
</script>

<style scoped lang="css">
.points_box {
    position: relative;
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    top: 200px;
    left: 50%;
    width: 120px;
    height: 30px;
    transform: translateX(-50%);
}
.points_box span {
    display: inline-block;
    position: relative;
    top: 50%;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    transform: translateY(-50%);
}
.points_box span:first-child {
    background-color: rgba(138, 138, 138, 0.1);
    animation: spanAnimation 0.5s linear 0s infinite alternate;
}
.points_box span:nth-child(2) {
    background-color: rgba(138, 138, 138, 0.2);
    animation: spanAnimation 0.5s linear 0s infinite alternate;
}
.points_box span:nth-child(3) {
    background-color: rgba(138, 138, 138, 0.3);
    animation: spanAnimation 0.5s linear 0s infinite alternate;
}
.points_box span:nth-child(4) {
    background-color: rgba(138, 138, 138, 0.4);
    animation: spanAnimation 0.5s linear 0s infinite alternate;
}
.points_box span:last-child {
    background-color: rgba(138, 138, 138, 0.5);
    animation: spanAnimation 0.5s linear 0s infinite alternate;
}
@keyframes spanAnimation {
    100%{
        background-color: rgba(138, 138, 138, 0.8);
    }
}
</style>